<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动布局案例</title>

    <style>
        html{
            margin: 8px;

        }

        header{
            width: 100%;
            height: 30px;
            background: #CCCCCC;
        }

        .top{
            width: 980px;
            height: 100%;
            background: antiquewhite;
            margin: 0px auto;
        }

        .top_left{
            width: 200px;
            height: 100%;
            background: tomato;
            float: left;

        }

        .top_right{
            width: 500px;
            height: 100%;
            background: deeppink;
            float: right;
        }

        .search{
            width: 980px;
            height: 100px;
            background: antiquewhite;
            margin: 0px auto;
        }

        .logo{
            width: 150px;
            height: 100%;
            background: blueviolet;
            float: left;
        }

        .search_form{
            width: 600px;
            height: 100%;
            background: cyan;
            float: left;
        }

        .phone{
            width: 200px;
            height: 100%;
            background: sienna;
            float: right;
        }

        nav{
            width: 980px;
            height: 40px;
            background: red;
            margin: 0px auto;
        }

        li{
            list-style: none;
            float: left;
        }
        a{
            text-decoration: none;
            float: left;
            width: 85px;
            color: white;
            font-weight: bold;
            text-align: center;
            /*这里line-height 值与 父类 nav标签的值一致,便可以实现上下居中*/
            line-height: 40px;

        }

        a:hover{
            background-color: white;
            color: red;
        }


        .ad{
            width: 980px;
            height: 120px;
            background: yellow;
            margin: 0px auto;
        }

        .banner{
            width: 980px;
            height: 300px;
            background: antiquewhite;
            margin: 0px auto;
        }

        .banner_left{
            width: 200px;
            height: 100%;
            background: sienna;
            float: left;
        }

        .banner_left_top{
            width: 100%;
            height: 30px;
            background: white;
        }

        .banner_left_bottom{
            width: 100%;
            height: 270px;
            background: blue;
            float: left;
        }


        .banner_center{
            width: 530px;
            height: 100%;
            background: cyan;
            float: left;
        }

        .banner_right{
            width: 240px;
            height: 100%;
            background-color: blueviolet;
            float: right;
        }

        .banner_right_top{
            width: 100%;
            height: 30px;
            background-color: #CCCCCC;
            float: left;

        }
        .banner_right_bottom{
            width: 100%;
            height: 270px;
            background: deeppink;
            float: left;
        }



    </style>


</head>
<body>


<header>
    <div class="top">
        <div class="top_left"></div>
        <div class="top_right"></div>
    </div>
</header>


<section>
    <div class="search">
        <div class="logo"></div>
        <div class="search_form"></div>
        <div class="phone"></div>
    </div>
</section>


<nav>
    <li><a href="">首页</a></li>
    <li><a href="">前端</a></li>
    <li><a href="">后端</a></li>
    <li><a href="">云计算</a></li>
    <li><a href="">产品设计</a></li>
    <li><a href="">前沿</a></li>
    <li><a href="">关于我们</a></li>
</nav>

<div class="ad"></div>


<section class="banner">
    <div class="banner_left">
        <div class="banner_left_top"></div>
        <div class="banner_left_bottom"></div>
    </div>
    <div class="banner_center"></div>
    <div class="banner_right">
        <div class="banner_right_top"></div>
        <div class="banner_right_bottom"></div>
    </div>
</section>

</body>
</html>